<style scoped>
  .tip{line-height: 20px;text-align: center;color:#999;font-size: 12px;}
  .next-btn{display:block;border-radius:5px;height:45px;text-align: center;line-height: 45px;color:#fff;margin:20px 10px;}
  .remark{width:100%;border:0;height: 50px;line-height: 50px;resize : none;}
  .agree{color:#26a2ff}
  .mark{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.3)}
  .verify{position:fixed;width:300px;height:170px;top:50px;left:50%;margin-left:-150px;border-radius:10px;}
  .verify h4{height:50px;line-height:50px;}
  .verify-input{padding:20px}
  .verify-input input{width:150px;border:solid 1px #ccc;}
  .verify-btn-box a{display:block;width:50%;height:50px;line-height:50px;text-align:center;font-size:16px;}
</style>
<template>
  <wrap title="身份信息验证">
    <div slot="page">
      <div class="fill-box padding-top">
        <p class="tip">仅限于全国公民身份查询，核实身份</p>
        <div class="fill-group light-bg">
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="label font-15">姓名</span>
            <input class="font-15 content" v-model="basic.name" type="text" placeholder="请填写姓名">
          </div>
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="label font-15">身份证号</span>
            <input class="font-15 content" v-model="basic.idCard" type="text" placeholder="请填写身份证号">
          </div>
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="label font-15">手机号码</span>
            <input class="font-15 content" v-model="basic.phone" type="number" placeholder="请填写手机号码">
          </div>
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="label font-15">电子邮箱</span>
            <input class="font-15 content" v-model="basic.email" type="text" placeholder="如QQ邮箱，136邮箱等">
          </div>
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="label font-15">最高学历</span>
            <span class="font-15 fill-data" :class="basic.educationName?'content':'placeholder'" @click="showEducation=!showEducation">
              {{basic.educationName?basic.educationName:'请选择'}}
              <i class="fa fa-angle-right font-24"></i> 
            </span> 
          </div>
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="label font-15">婚姻情况</span>
            <span class="font-15 fill-data" :class="basic.marriageName?'content':'placeholder'" @click="showMarriage=!showMarriage">
              {{basic.marriageName?basic.marriageName:'请选择'}}
              <i class="fa fa-angle-right font-24"></i> 
            </span> 
          </div>  
        </div>
        <div class="fill-group light-bg">
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="label font-15">常用联系人</span>
            <input class="font-15 content" v-if="!canSelectContact"  v-model="basic.contactPhone" type="number" placeholder="请输入常用联系人电话">
            <span class="font-15 fill-data" :class="basic.contactPhone?'content':'placeholder'" v-if="canSelectContact" >{{basic.contactPhone ? basic.contactPhone+'('+basic.contactName+')': '请选择'}}</span> 
            <!-- <span class="font-15 fill-data" :class="basic.contactPhone?'content':'placeholder'" v-if="canSelectContact" >{{basic.contactPhone ? basic.contactPhone: '请选择'}}</span> -->
            <i class="fa fa-address-book-o fa-lg" v-if="canSelectContact" @click="getContacts"></i>
          </div> 
        </div>
        <div class="fill-group light-bg">
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="label font-15">常用地区</span>
            <span class="font-15 fill-data"  :class="basic.houseCountyName?'content':'placeholder'"  @click="showAddress=!showAddress">
              {{basic.houseCountyName?basic.houseProvinceName+basic.houseCityName+basic.houseCountyName:'请选择'}}
              <i class="fa fa-angle-right font-24"></i> 
            </span> 
          </div>
          <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
            <span class="label font-15">详细地址</span>
            <input class="font-15 content" v-model="basic.houseAddress" type="text" placeholder="请填写详细地址">
          </div>
        </div>
        <!-- <label class="checkbox"  @click="agree=!agree" >
          <i class="fa fa-lg" :class="[agree?'fa-check-square-o':'fa-square-o']" aria-hidden="true"></i>同意<span class="agree">《个人征信授权协议》</span>
        </label> -->
      </div>
      <a href="javascript:;" :class="['next-btn',nextEnable?'red-bg':'grey-9-bg','font-16']" @click="next()">提交验证</a>
      <cube-picker :data="educationData" :show="showEducation" @cancel="showEducation = false" @select="selectEducation"></cube-picker>
      <cube-picker :data="marriageData" :show="showMarriage" @cancel="showMarriage = false" @select="selectMarriage"></cube-picker>
      <show-city :show="showAddress" @cancel="showAddress = false" @select="selectAddress"></show-city>
      <keyboard :loading="loading" :time="time" :phone="basic.phone" :verifyBtn='verifyBtn' @submit="postVerify" @send="sendVerify" @close="showVerify = false" v-if="showVerify"></keyboard>
    </div>
  </wrap>
</template>
<script>
  const Validate = {
    mobile: function (num) { // 验证手机
      return /^1[3|4|5|7|8][0-9]\d{8}$/.test(num)
    },
    email: function (email) { // 验证邮箱
      /* eslint-disable*/
      return /^([a-zA-Z0-9]+[_|\_|-|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(email)
    },
    number: function (num) { // 验证数字
      return /^[0-9]*$/.test(num)
    }
  }
  import wrap from '../../components/wrap.vue'
  import keyboard from '../../components/keyboard.vue'
  import cubePicker from '../../components/cubePicker.vue'
  import showCity from '../../components/showCity.vue'
  export default {
    components: {wrap, keyboard, cubePicker, showCity},
    data () {
      return {
        applyId: 0,
        nextEnable: false,
        agree: true,
        showVerify: false,
        loading: false,
        verifyBtn: {
          text: '获取验证码',
          enable: true,
          desc: ''
        },
        time: 60,
        verify: '',
        showEducation: false,
        showMarriage: false,
        showAddress: false,
        educationData: [],
        marriageData: [],
        basic: {
          recommendStaffNum: '',
          typeCode: 1,
          name: '',
          idCard: '',
          phone: '',
          email: '',
          educationCode: 0,
          educationName: '',
          marriageCode: 0,
          marriageName: '',
          contactPhone: '',
          contactName: '',
          houseProvinceCode: 0,
          houseProvinceName: '',
          houseCityCode: 0,
          houseCityName: '',
          houseCountyCode: 0,
          houseCountyName: '',
          houseAddress: '',
        },
        appInfo: {
          app_ukey: '',
          app_type: '',
          networkStatus: '',
          latitude: '',
          longitude: ''
        }
      }
    },
    computed: {
      canSelectContact () {
        /* eslint-disable no-undef */
        return (this.$store.state.inAPP)
      }
    },
    created () {
      const self = this
      self.appInfo.app_ukey = this.$cookie.get('app_ukey') || 0
      self.appInfo.app_type = this.$cookie.get('app_type') || 0
      self.appInfo.networkStatus = this.$cookie.get('networkStatus') || 0
      self.appInfo.latitude = this.$cookie.get('latitude') || 0
      self.appInfo.longitude = this.$cookie.get('longitude') || 0
      self.getCheckIdentity()
      if (self.basic.typeCode) {
        self.$watch('basic', () => {
          if (self.basic.typeCode &&
          self.basic.name && self.basic.idCard && self.basic.phone && self.basic.email && self.basic.contactPhone && parseInt(self.basic.educationCode) && parseInt(self.basic.houseCountyCode) && self.basic.houseAddress) {
            self.nextEnable = true
          } else {
            self.nextEnable = false
          }
        }, {deep: true})
      } else {
        self.$router.push('/')
      }
    },
    methods: {
      getContacts () {
        /* eslint-disable no-undef */
        jiujiJsBridge.getContacts({}, (res) => {
          this.basic.contactName = res.split(',')[0]
          this.basic.contactPhone = res.split(',')[1]
        })
      },
      selectEducation (data) {
        const self = this
        self.basic.educationName = data.label[0]   
        self.basic.educationCode = data.value[0]
        self.showEducation = false
      },
      selectMarriage (data) {
        const self = this
        self.basic.marriageName = data.label[0]
        self.basic.marriageCode = data.value[0]
        self.showMarriage = false
      },
      selectAddress (data) {
        const self = this
        self.basic.houseProvinceCode= data.value[0]
        self.basic.houseProvinceName= data.label[0]
        self.basic.houseCityCode = data.value[1]
        self.basic.houseCityName = data.label[1]
        self.basic.houseCountyCode = data.value[2]
        self.basic.houseCountyName = data.label[2]
        self.showAddress = false
      },
      getCheckIdentity () {
        const self = this
        this.$api.fill.getCheckIdentity().then(res => {
          if (res.code === 0) {
            let data = res.data
            self.basic = res.data
            self.basic.typeCode = self.$route.query.typeCode
            self.basic.recommendStaffNum = self.$route.query.recommendStaffNum
            self.educationData = self.basic.educations
            self.marriageData = self.basic.marriageCodes
            delete self.basic.educations
            delete self.basic.marriageCodes
            if(!data.typeCode){
              self.basic.typeCode = self.$cookie.get('typeCode')
            }
          } else {
            this.$Toast(userMsg)
          }
        })
      },
      getDictsByType (type) {
        const self = this
        this.$api.fill.getDictsByType(type).then(res => {
          if (res.code === 0) {
            let data = res.data
            if (type === 'installment_user_education') {
              let option = []
              data.forEach(function (element) {
                option.push({value: element.value, label: element.label})
              }, this)
              self.educationData = option
              // console.log(self.educationData)
            } else if (type === 'installment_user_marriage') {
              let option = []
              data.forEach(function (element) {
                option.push({value: element.value, label: element.label})
              }, this)
              self.marriageList[0].option = option
              // console.log(self.marriageList)
            }
          }
        })
      },
      next () {
        const self = this
        if (!self.nextEnable) {
          return
        }
        if (!self.agree) {
          self.$Toast('必须同意授权协议，才能进行下一步')
          return
        }
        if (!Validate.mobile(self.basic.phone)) {
          self.$Toast('请填写正确手机号')
          return
        }
        if (!Validate.email(self.basic.email)) {
          self.$Toast('请填写正确邮箱')
          return
        }
        // self.$router.push('/detail')
        self.$Indicator.open()
        self.$api.fill.sendValiCode(self.basic.phone,1).then(res => {
          self.$Indicator.close()
          if(res.code === 0){
            self.showVerify = true
            self.verifyBtn.desc = '验证码发送成功'
          }else{
            self.showVerify = false
            self.$MessageBox.alert(res.userMsg);
          }
        })
      },
      sendVerify () {
        const self = this
        if (!self.verifyBtn.enable) {
          return
        }
        self.$Indicator.open()
        self.$api.fill.sendValiCode(self.basic.phone,1).then(res => {
          self.$Indicator.close()
          if(res.code === 0){
            self.showVerify = true
            self.verifyBtn.desc = '验证码发送成功'
            // self.countDown()
          }else{
            self.showVerify = false
            self.$MessageBox.alert(res.userMsg);
          }
        })
      },
      postVerify (data) {
        const self = this
        self.verify = data
        if (!self.verify) {
          self.$Toast('请填写验证码')
          return
        }
        let code = self.verify
        let telephone = self.basic.phone
        self.$Indicator.open()
        self.loading=true
        self.$api.fill.checkValiCode(code, telephone).then(res => {
          self.$Indicator.close()
          self.loading=false
          if (res.code == 0) {
            self.$api.fill.checkIdentity(self.basic ).then(res => {
              if(res.code === 0){
                self.showVerify = false
                self.$router.push('/fill/bank/')
              }else{
                self.showVerify = false
                self.$MessageBox.alert(res.userMsg)
              }
            })
          } else {
            self.verifyBtn.text = '重新发送'
            self.verifyBtn.enable = true
            self.verifyBtn.desc = res.msg+'，请重新获取'
          }
        }).always(function () {
          self.$Indicator.close()
        })
      },  
    }
  }
</script>
